<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!--侧滑菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-left">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">

						<div class="title" style="margin-bottom: 25px;"></div>
						<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									工单列表
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									代办事项
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									客户管理
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									字典管理
								</a>
							</li>
						</ul>
					</div>
				</div>
			</aside>
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
					<h1 class="mui-title">工单列表</h1>
				</header>
				<div id="list" class="mui-content mui-scroll-wrapper">
					<div class="mui-input-row mui-search">
						<input type="search" class="mui-input-clear" placeholder="">
					</div>
				</div>
				<nav class="mui-bar mui-bar-tab">
					<a class="mui-tab-item mui-active">
						<span class="mui-icon mui-icon-home"></span>
						<span class="mui-tab-label">首页</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-phone"></span>
						<span class="mui-tab-label">电话</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-email"></span>
						<span class="mui-tab-label">邮件</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-gear"></span>
						<span class="mui-tab-label">设置</span>
					</a>
				</nav>
			</div>
			<div class="mui-off-canvas-backdrop"></div>
		</div>
		<script type="text/javascript">
			//侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			//主界面容器
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			//菜单容器
			var offCanvasSide = document.getElementById("offCanvasSide");
			if(!mui.os.android) {
				var spans = document.querySelectorAll('.android-only');
				for(var i = 0, len = spans.length; i < len; i++) {
					spans[i].style.display = "none";
				}
			}
			//移动效果是否为整体移动
			var moveTogether = false;
			//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
			var classList = offCanvasWrapper[0].classList;
			//变换侧滑动画移动效果；
			offCanvasSide.classList.remove('mui-transitioning');
			offCanvasSide.setAttribute('style', '');
			classList.remove('mui-slide-in');
			classList.remove('mui-scalable');
			classList.add('mui-slide-in');
			offCanvasWrapper.offCanvas().refresh();

			//主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			//实现ios平台原生侧滑关闭页面；
			if(mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
			//查看详情点击事件
			mui(".mui-content").on('tap','#datalist',function(){
					//打开详情
					mui.openWindow({
						id: 'detail',
						url: './pages/detail.html'
					});
				});
			(function() {
					mui.ajax({
						//url: 'http://lluvia.vip/screwdriver/order/getList',
						url: './json/list.json',
						dataType: 'json',
						success: function(result) {
							var jsonlist = result;
							console.log(jsonlist);
							var list = document.querySelector('#list');
							for(var i in jsonlist) {
								var str = "<div id='datalist' class='mui-card-header mui-card-media'><img src='../images/logo.png' /><div id='div2' class='mui-media-body'>" + jsonlist[i].customer_name + "<p>" + jsonlist[i].sample_type + "</p></div></div>"
								mui('#list')[0].insertAdjacentHTML('beforeEnd', str);
							}
						},
						error: function() {
							alert('服务器异常，请联系电话：18610281011');
						}
					});
				})();
		</script>
	</body>

</html>